<title>菜单管理</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>系统管理</cite></a>
        <a><cite>菜单管理</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="LAY-system-menus-manage" lay-filter="LAY-system-menus-manage"></table>
            <script type="text/html" id="LAY-system-menus-toolbar">
                <div class="layui-btn-container">
                    <btton class="layui-btn layui-btn-sm layui-btn-normal" lay-event="expandAll"> 展开</btton>
                    <btton class="layui-btn layui-btn-sm layui-btn-normal" lay-event="foldAll"> 折叠</btton>
                    {{# if (AppGeneral.userCan('system.menus.create')) { }}
                    <btton class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> </btton>
                    {{# } }}
                </div>
            </script>
        </div>
    </div>
</div>
<script>
    layui.use(['index', 'treeTable', 'baseMethods'], function () {
        const {tableTree, baseMethods} = layui, tableId = 'LAY-system-menus-manage';
        const dataTable = tableTree.render({
            elem: '#'+tableId,
            toolbar: '#LAY-system-menus-toolbar',
            defaultToolbar: false,
            tree: {
                iconIndex: 0,
                isPidData: true,
                idName: 'id',
                pidName: 'parent_id'
            },
            cols: [[
                {field: 'name', title: '权限名称'},
                {field: 'display_name', title: '显示名称',
                    templet: function (data) {
                        return '<i class="'+data.icon+'"></i> '+data.display_name;
                    }
                },
                {field: 'genre', title: '类型', unresize: true, width:100,
                    templet: function (data) {
                        if (data.genre === 1) {
                            return '<span class="layui-badge layui-bg-cyan">菜单</span>'
                        }else if (data.genre === 2) {
                            return '<span class="layui-badge layui-bg-orange">按钮</span>';
                        }
                    }
                },
                {field: 'status', title: '状态', unresize: true, width:100,
                    templet: function (data) {
                        return data.status === 1 ? '<span class="layui-badge layui-bg-blue">正常</span>' : '<span class="layui-badge">禁用</span>';
                    }
                },
                {field: 'created_at', title: '添加时间', width: 180},
                {fixed: 'right', width: 200, align:'center',
                    templet: function () {
                        let html = '<div class="layui-btn-group">\n';
                        if (AppGeneral.userCan('system.menus.create')) {
                            html += '<btton class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addChild" ><i class="layui-icon layui-icon-addition"></i></btton>\n';
                        }
                        if (AppGeneral.userCan('system.menus.edit')) {
                            html += '<btton class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></btton>\n';
                        }
                        if (AppGeneral.userCan('system.menus.destroy')) {
                            html += '<btton class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></btton>\n';
                        }
                        return html + '</div>\n';
                    }
                }
            ]],
            reqData: function (data, callback) {
                baseMethods.request({
                    url: '/system/menus/list',
                    done: function (result) {
                        if (result.code === 200) {
                            callback(result.data.rows);
                        }
                    }
                })
            }
        });
        let tableTools = {
            add: function () {
                baseMethods.adminLayer([
                    {title: '添加', area: ['800px', '600px'], id: 'LAY-popup-system-menus-form'},
                    {tpl: 'system/menus/form', id: 'LAY-system-menus-form'},
                    {url: '/system/menus/store', type: "post",
                        success: function () {
                            dataTable.reload();
                        }
                    },
                ]);
            },
            expandAll: function () {
                dataTable.expandAll();
            },
            foldAll: function () {
                dataTable.foldAll();
            },
            edit: function (obj) {
                let data = obj.data;
                baseMethods.adminLayer([
                    {title: '编辑', area: ['800px', '600px'], id: 'LAY-popup-system-menus-form'},
                    {tpl: 'system/menus/form', mode: 'edit', data, id: 'LAY-system-menus-form'},
                    {url: '/system/menus/'+data.id+'/update', type: "put",
                        success: function () {
                            dataTable.reload();
                        }
                    },
                ]);
            },
            delete: function (obj) {
                baseMethods.toolOpera({
                    title: '确认删除吗？',
                    request: {
                        url: '/system/menus/destroy',
                        type: "delete",
                        data: {ids: [obj.data.id]},
                        success: function () {
                            obj.del();
                        }
                    },
                })
            },
            addChild: function (obj) {
                let data = obj.data;
                baseMethods.adminLayer([
                    {title: '添加下级', area: ['800px', '600px'], id: 'LAY-popup-system-menus-form'},
                    {tpl: 'system/menus/form', mode: 'addChild', data, id: 'LAY-system-menus-form'},
                    {url: '/system/menus/store', type: "post",
                        success: function () {
                            dataTable.reload();
                        }
                    },
                ]);
            },
        }
        tableTree.on('toolbar('+tableId+')', function(obj) {
            tableTools[obj.event] ? tableTools[obj.event].call(this, obj) : '';
        });
        tableTree.on('tool('+tableId+')', function (obj) {
            tableTools[obj.event] ? tableTools[obj.event].call(this, obj) : '';
        });
    });
</script>
